<template>
  <div class="home">

    <div class="header">
      <span class="welcome-message">
        你好<span >{{ userStore.name }}</span>，欢迎来到千宠宠物店
      </span>
    </div>

    <div class="main-content">
      <div class="new-products-section">
        <h2 style="color: red; font-size: 30px;">最新上架商品</h2>
        <el-row :gutter="20">
          <el-col v-for="(product, index) in newProducts" :key="index" :span="6">
            <el-card shadow="hover" class="product-item">
              <img :src="product.image" alt="Product Image" style="width: 100%; height: auto;">
              <div style="padding: 14px;">
                <span style = "font-weight: bold; font-size: 2vh; letter-spacing: 2px;">{{ product.name }}</span>
                <div class="bottom clearfix">
                  <time class="time">上架日期:{{ product.date }}</time><br>
                  <el-button text class="button">查看详情</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElButton, ElCard, ElRow, ElCol } from 'element-plus';
import { useUserStore } from '@/stores/userStore';
import { useRouter } from 'vue-router';
import { ref,onMounted } from 'vue';

//获取用户信息
const userStore = useUserStore();

onMounted(() => {
  userStore.loadLocalStorage()
})


const newProducts = ref([
  { name: '比熊专用狗粮', image: '/images/dogfood.jpg', date: '2025-04-30' },
  { name: '豆腐猫砂', image: '/images/catlitter.jpg', date: '2025-04-20' },
  { name: '金丝鸟笼', image: '/images/bird.jpg', date: '2025-04-13' },
  { name: '生态鱼缸', image: '/images/fish.jpg', date: '2025-04-12' }
])
</script>

<style scoped>
.home {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f5f7fa;
  background: url('/images/homebackground.jpg') no-repeat;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
  opacity: 1;
}

.header {
  display: flex;
  width: 100%;
  position:absolute;
  top:20px;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #753b14;
  color: white;

}
.welcome-message {
  font-size: 24px;
}
.main-content {
  padding: 20px;
}
.category-section, .new-products-section {
  margin-bottom: 40px;
}
.category-item, .product-item {
  margin-right: 20px;
  margin-bottom: 20px;
}
</style>



